<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="refresh" content="10">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>KubeOne Dashboard</title>
  </head>
  <body class="d-flex flex-column h-100">
  <header class="navbar navbar-expand-lg sticky-top bd-navbar border-bottom py-3 bg-body px-4 shadow-sm">
    <nav class="container-l bd-gutter d-flex flex-wrap flex-lg-nowrap align-items-center">
      <img src="/assets/kubeone-logo.png" alt="logo" style="height: 30px;"/>
      <h4 class="mx-3 my-0">Dashboard</h4>
    </nav>
  </header>
  <main class="flex-shrink-0 p-4 bg-body-tertiary flex-grow-1">
    <div class="container-l d-flex flex-column h-100 gap-4">
      <div class="card shadow-sm">
        <div class="card-body">
          <h4 class="card-title pb-2">Control-Plane Nodes</h4>
          {{ template "nodes" .ControlPlaneNodes }}
        </div>
        {{ with .WorkerNodes }}
        <div class="card-body">
          <h4 class="card-title pb-2">Worker Nodes</h4>
          {{ template "nodes" . }}
        </div>
        {{ end }}
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          <h4 class="card-title pb-2">Machine Deployments</h4>
          <div class="mt-2">
            <table class="table">
              <thead>
              <tr>
                <th scope="col">Status</th>
                <th scope="col">Name</th>
                <th scope="col">Namespace</th>
                <th scope="col">Replicas</th>
                <th scope="col">Kubelet</th>
                <th scope="col">Age</th>
              </tr>
              </thead>
              <tbody>
              {{ range .MachineDeployments }}
              <tr class="table-light shadow-sm">
                <td>
                  <div class="d-flex">
                    {{ template "status-pill" "Ready" }}
                  </div>
                </td>
                <td><strong>{{ .Name }}</strong></td>
                <td>{{ .Namespace }}</td>
                <td>{{ .AvailableReplicas }} / {{ .Replicas }}</td>
                <td>{{ .Kubelet }}</td>
                <td>{{ .Age }}</td>
              </tr>
              <tr>
                <td colspan="7" class="p-0">
                  <h5 class="p-2 m-0">Machines</h5>
                  <table class="table">
                    <thead>
                    <tr>
                      <th scope="col">Status</th>
                      <th scope="col">Name</th>
                      <th scope="col">Namespace</th>
                      <th scope="col">Node</th>
                      <th scope="col">Kubelet</th>
                      <th scope="col">Address</th>
                      <th scope="col">Age</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range .Machines }}
                    <tr class="{{ if .Deleted }}table-danger{{ end }}">
                      <td>
                        <div class="d-flex">
                          {{ if not .Deleted }}
                          {{ template "status-pill" "Ready" }}
                          {{ else }}
                          {{ template "status-pill" "Deleting" }}
                          {{ end }}
                        </div>
                      </td>
                      <td>{{ .Namespace }}</td>
                      <td>{{ .Name }}</td>
                      <td>{{ .Node }}</td>
                      <td>{{ .Kubelet }}</td>
                      <td>{{ .Address }}</td>
                      <td>{{ .Age }}</td>
                    </tr>
                    {{ end }}
                    </tbody>
                  </table>
                </td>
              </tr>
              {{ end }}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 border-top">
    <div class="container-l px-4">
      <span class="text-body-secondary">Powered by Kubermatic</span>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
          crossorigin="anonymous"></script>
  <script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  </script>
  </body>
</html>

{{define "status-pill"}}
<span role="button" class="text-bg-{{ if not . }}secondary{{ else if eq . `Ready` }}success{{ else }}danger{{ end }} rounded-circle" style="width:20px; height: 20px" data-bs-toggle="tooltip" title="{{ if not . }}Unknown{{ else }}{{ . }}{{ end }}"></span>
{{end}}

{{define "status-badge"}}
<span class="badge text-bg-{{ if not . }}secondary{{ else if eq . `Ready` }}success{{ else }}danger{{ end }} rounded-pill">{{ . }}</span>
{{end}}

{{ define "nodes" }}
<div class="row row-cols-1 row-cols-md-4 g-3">
  {{ range . }}
  <div class="col">
    <div class="card">
      <div class="card-header d-flex align-items-center gap-2">
        {{ template "status-pill" .Status }}
        {{.Name}}
      </div>
      <div class="card-body">
        <div class="row row-cols-2 g-2">
          <div class="col-4"><strong>Version</strong></div>
          <div class="col">{{.Version}}</div>
          <div class="col-4"><strong>Seen</strong></div>
          <div class="col">{{.LastHeartbeatTime}}</div>
          {{ if .IsControlPlane }}
          <div class="col-4"><strong>etcd</strong></div>
          <div class="col">
            <div class="d-flex">
              {{ if .EtcdOK }}
                {{ template "status-badge" "Ready" }}
              {{ else }}
                {{ template "status-badge" "Not Ready" }}
              {{ end}}
            </div>
          </div>
          <div class="col-4"><strong>apiserver</strong></div>
          <div class="col">
            <div class="d-flex">
              {{ if .APIServerOK }}
                {{ template "status-badge" "Ready" }}
              {{ else }}
                {{ template "status-badge" "Not Ready" }}
              {{ end}}
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
  {{ end }}
</div>
{{ end }}
